<template>
    <div class="container">
        <a-modal v-model="visible" title="绑定属性" @ok="handleOk" width="680px" :dialog-style="{ top: '20px' }"
            destroyOnClose @cancel="handleOk">
            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="ruleForm">
                <a-form-model-item label="选择区域或设备" prop="value">
                    <a-tree-select style="width: 100%" v-model="form.value"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData"
                        :replaceFields="replaceFields" placeholder="请选择设备" tree-default-expand-all @select="onselect"
                        allowClear>
                    </a-tree-select>
                </a-form-model-item>
                <a-form-model-item v-if="!bindVisible && models.name === 'text'" label="数据类型" prop="type">
                    <a-select style="width: 100%;" v-model="form.type">
                        <a-select-option :value="item.value" v-for="(item, index) in regionList" :key="index">{{
                            item.description
                            }}</a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-form-model>

            <a-tabs :default-active-key="sensors.index || 1" tab-position="left" style="margin-top: 10px;"
                v-if="bindVisible && (models && models.name === 'text')">
                <a-tab-pane :key="item.value" :tab="item.name" v-for="(item, index) in systemList">
                    <ul class="leafer_ul">
                        <template v-if="sensorsList[item.value] && sensorsList[item.value].length > 0">
                            <li v-for="(_item, _index) in sensorsList[item.value]" :key="_index">
                                <a-row style="margin: 3px;" :key="timer">
                                    <a-col :span="2">{{ _index + 1 }}</a-col>
                                    <a-col :span="10">{{ _item.name }}</a-col>
                                    <a-col :span="12">
                                        <a-button style="margin-left: 30%;" type="danger"
                                            v-if="(sensors.data && sensors.data.sensorid === _item.sensorid)"
                                            @click="resetBinDing">取消绑定</a-button>

                                        <a-button style="margin-left: 30%;" v-else
                                            @click="binDing(_item, item.value)">绑定</a-button>
                                    </a-col>
                                </a-row>
                            </li>
                        </template>
                        <a-empty v-else />
                    </ul>
                </a-tab-pane>
            </a-tabs>
            <template slot="footer">
                <a-button @click="closedraw">
                    取消
                </a-button>
                <a-button type="primary" @click="handleOk">
                    确定
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
import { getHostSensor, getRegionTypeList } from './api'
import minx from './mixin'
export default {
    mixins: [minx],
    data() {
        return {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            type: 1,
            timer: null,
            visible: false,
            treeData: [],
            models: null,
            systemList: [
                {
                    name: '无线测温系统',
                    value: 1
                },
                {
                    name: '红外双视系统',
                    value: 2
                },
                {
                    name: '光纤测温系统',
                    value: 4
                },
            ],
            sensorsList: [],
            bindVisible: true,
            form: {},
            rules: {
                value: [{ required: true, message: '请选择区域或设备', trigger: 'change' }],
                // type: [{ required: true, message: '请选择区域类型', trigger: 'change' }],
            },
            sensors: {
                data: null,
                index: null
            },// 传感器信息
            host: null,// 绑定设备信息
            region: null, // 区域信息
            regionList: [],// 区域数据类型
        }
    },
    mounted() {
        this.getDrawList()
        this.getRegionList()
    },
    methods: {
        async getDrawList() {
            const res = await this.getlistOrgDeviceTree()
            this.treeData = res
        },
        addHost(val) {
            console.log(`output->val`, val.data)
            this.models = val
            this.visible = true
            this.form = {}
            this.bindVisible = true
            if (this.models.name === 'text') {
                if (this.models.data && this.models.data.sensors) {
                    this.bindVisible = true
                    this.form.value = this.models.data.host.code
                    this.gethostsensor(this.models.data.host.id)
                    this.host = this.models.data.host
                    this.sensors = this.models.data.sensors
                } else if (this.models.data && this.models.data.region) {
                    this.bindVisible = false
                    this.region = this.models.data.region.region
                    this.form.type = this.models.data.region.type
                    this.form.value = this.models.data.region.region.code
                }
            } else {
                if (this.models.data && this.models.data.region) {
                    this.bindVisible = false
                    this.form.type = this.models.data.region.type
                    this.form.value = this.models.data.region.region.code
                    this.region = this.models.data.region.region
                } else if (this.models.data && this.models.data.host) {
                    this.form.value = this.models.data.host.code
                    this.host = this.models.data.host
                }
            }
        },
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    if (!this.bindVisible) {
                        delete this.models.data.sensors
                        this.models.data.region = {
                            region: { ...this.region },
                            type: this.regionList[this.form.type]
                        }
                    } else {
                        if (this.models.name === 'text') {
                            if (this.sensors.data && this.sensors.index) {
                                this.models.data = {
                                    host: this.host,
                                    sensors: { ...this.sensors },
                                }
                            } else {
                                this.$message.error('请选择传感器')
                            }
                        } else {
                            delete this.models.data.region
                            delete this.models.data.sensors
                            this.models.data.host = this.host
                        }
                    }

                    this.closedraw()
                }
            })
        },
        onselect(e, node) {
            if (node && node.dataRef) {
                if (node.dataRef.children) {
                    this.bindVisible = false
                    this.region = node.dataRef
                } else {
                    this.bindVisible = true
                    if (this.models.name === 'text') {
                        this.gethostsensor(node.dataRef.id)
                    }
                    this.host = node.dataRef
                }
            }
        },
        closedraw() {
            this.form = {}
            this.host = null
            this.region = null
            this.sensors = {
                data: null,
                index: null
            }
            this.sensorsList = []
            this.bindVisible = false
            this.visible = false
        },
        gethostsensor(id) {
            getHostSensor({ deviceId: id }).then(res => {
                this.sensorsList = res.data
            })
        },
        binDing(val, index) {
            this.sensors = {
                data: val,
                index: index
            }
        },
        resetBinDing() {
            delete this.sensors.data
            this.timer = new Date().getTime()
        },
        getRegionList() {
            getRegionTypeList().then(res => {
                this.regionList = res.data
            })
        }
    }
}
</script>

<style lang='less' scoped>
.leafer_ul {
    height: 500px;
    overflow-y: scroll;

    li {
        line-height: 32px;
        border-bottom: 1px solid #f5f5f5;
    }
}

.leafer_ul>li:hover {
    background: #f5f5f5;
}
</style>